<template>
  <view class="page-content">
    <view class="header-box">
      <view class="flex-col list-item">
        <view class="flex-row">
          <view class="flex-row items-center flex-1">
            <image class="shrink-0 image_5" :src="detailInfo.phone" />
            <view class="flex-col items-start flex-1 ml-15">
              <text class="font_2">{{ detailInfo.name }}</text>
              <text class="mt-16 font_2 text_5"
                >{{ detailInfo.graduationInstitution }}·{{
                  detailInfo.company
                }}</text
              >
            </view>
          </view>
        </view>
        <view class="flex-row items-center group_7 mt-5">
          <text class="font_7 text_7">擅长领域：{{ detailInfo.genius }}</text>
        </view>
      </view>
    </view>
    <view class="content-box">
      <view class="flex-col relative section">
        <form-item-title text="基本信息"></form-item-title>
        <view class="flex-col self-stretch group_4">
          <view class="grid">
            <view class="flex-col items-start relative grid-item">
              <text class="font_3">外出诊疗</text>
              <view class="flex-row items-center self-stretch section_11 mt-7">
                <text class="text_31">￥</text>
                <text class="text_30">{{ detailInfo.cost1 }}</text>
                <text class="text_32">/次</text>
              </view>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_3">公猫绝育</text>
              <view class="flex-row items-center self-stretch section_11 mt-7">
                <text class="text_31">￥</text>
                <text class="text_30">{{ detailInfo.cost2 }}</text>
                <text class="text_32">/次</text>
              </view>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_3">母猫绝育</text>
              <view class="flex-row items-center self-stretch section_11 mt-7">
                <text class="text_31">￥</text>
                <text class="text_30">{{ detailInfo.cost3 }}</text>
                <text class="text_32">/次</text>
              </view>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_3">公犬绝育</text>
              <view class="flex-row items-center self-stretch section_11 mt-7">
                <text class="text_31">￥</text>
                <text class="text_30">{{ detailInfo.cost4 }}</text>
                <text class="text_32">/次</text>
              </view>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_3">母犬绝育</text>
              <view class="flex-row items-center self-stretch section_11 mt-7">
                <text class="text_31">￥</text>
                <text class="text_30">{{ detailInfo.cost5 }}</text>
                <text class="text_32">/次</text>
              </view>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_3">牙齿清洗</text>
              <view class="flex-row items-center self-stretch section_11 mt-7">
                <text class="text_31">￥</text>
                <text class="text_30">{{ detailInfo.cost6 }}</text>
                <text class="text_32">/次</text>
              </view>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_3">妙三多</text>
              <view class="flex-row items-center self-stretch section_11 mt-7">
                <text class="text_31">￥</text>
                <text class="text_30">{{ detailInfo.cost7 }}</text>
                <text class="text_32">/次</text>
              </view>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_3">犬八联</text>
              <view class="flex-row items-center self-stretch section_11 mt-7">
                <text class="text_31">￥</text>
                <text class="text_30">{{ detailInfo.cost8 }}</text>
                <text class="text_32">/次</text>
              </view>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_3">犬驱虫</text>
              <view class="flex-row items-center self-stretch section_11 mt-7">
                <text class="text_31">￥</text>
                <text class="text_30">{{ detailInfo.cost9 }}</text>
                <text class="text_32">/次</text>
              </view>
            </view>
            <view class="flex-col items-start relative grid-item">
              <text class="font_3">猫驱虫</text>
              <view class="flex-row items-center self-stretch section_11 mt-7">
                <text class="text_31">￥</text>
                <text class="text_30">{{ detailInfo.cost10 }}</text>
                <text class="text_32">/次</text>
              </view>
            </view>
          </view>
        </view>
        <view class="common-box">
          <form-item-title text="医生备注"></form-item-title>
          <view class="beizhu-msg">
            {{ detailInfo.remark ? detailInfo.remark : '' }}
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-box">
      <view class="flex-row items-center group_5">
        <view class="flex-col justify-start items-center button text-wrapper"
          ><text class="font">聊一聊</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDoctor } from '@/api/cwbl.js'
import formItemTitle from 'components/index/form-item-title.vue'
export default {
  components: {
    formItemTitle,
  },
  data() {
    return {
      detailInfo: null,
    }
  },
  onLoad: function (option) {
    this.getDetail(option.id)
  },
  methods: {
    async getDetail(id) {
      let res = await getDoctor(id)
      this.detailInfo = res.data
      this.detailInfo.photoImgArr = this.detailInfo.phone
        ? this.detailInfo.phone.split(',')
        : []
    },
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  background: #f6f6f6;
  .header-box {
    width: 100%;
    min-height: 180rpx;
    padding-bottom: 40rpx;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
      #fcd610;
    border-radius: 24px 24px 24px 24px;
    .ml-15 {
      margin-left: 30rpx;
    }

    .mt-5 {
      margin-top: 10rpx;
    }

    .list-item {
      padding: 24rpx 24rpx 24rpx 32rpx;
      border-radius: 16rpx;

      .image_5 {
        border-radius: 84rpx;
        width: 108rpx;
        height: 108rpx;
      }

      .font_2 {
        font-size: 28rpx;
        font-family: PingFang SC;
        line-height: 26.02rpx;
        font-weight: 700;
        color: #000000;
      }

      .text_5 {
        line-height: 26.32rpx;
      }

      .group_6 {
        margin-top: 4rpx;
        line-height: 28.48rpx;
        height: 30.58rpx;

        .font_4 {
          font-size: 24rpx;
          font-family: D-DIN;
          line-height: 17.72rpx;
          color: #ff7676;
        }

        .font_3 {
          font-size: 40rpx;
          font-family: D-DIN;
          line-height: 28.48rpx;
          color: #ff7676;
        }

        .font_5 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 22.22rpx;
          font-weight: 700;
          color: #999999;
        }
      }

      .group_7 {
        padding: 0 8rpx;

        .image_6 {
          width: 22rpx;
          height: 26rpx;
        }

        .font_6 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 17.72rpx;
          color: #999999;
        }

        .text_6 {
          margin-left: 8rpx;
          line-height: 17.8rpx;
        }

        .font_7 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 22.22rpx;
          color: #999999;
        }

        .text_7 {
          margin-left: 36rpx;
          line-height: 22.12rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 1;
        }
      }
    }
  }

  .content-box {
    z-index: 99;
    .beizhu-msg {
      padding: 32rpx 38rpx;
      font-weight: 500;
      font-size: 28rpx;
      background: #fff !important;
      color: #999999;
      height: auto;
    }
    .mt-11 {
      margin-top: 22rpx;
    }

    .ml-9 {
      margin-left: 18rpx;
    }

    .section {
      margin: 0 32rpx 0;
      padding-top: 32rpx;
      background-color: #f6f6f6;
      border-radius: 24rpx;

      .text_2 {
        margin-left: 44rpx;
        color: #000000;
        font-size: 48rpx;
        font-family: PingFang SC;
        font-weight: 700;
        line-height: 43.44rpx;
      }

      .group_4 {
        .group_5 {
          padding: 0 32rpx;
        }

        .grid {
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .grid-item {
            padding: 28rpx 40rpx;
            width: 48%;
            background: #fff;
            border-radius: 8px 8px 8px 8px;
            margin-bottom: 20rpx;
            .section_11 {
              padding: 18rpx 0 0 0;
              margin-right: 40rpx;

              .text_31 {
                color: #ff7676;
                font-size: 24rpx;
                line-height: 17.72rpx;
              }

              .text_30 {
                color: #ff7676;
                font-size: 32rpx;
                font-weight: bold;
                line-height: 28.48rpx;
                width: max-content;
              }
              .text_32 {
                color: #999999;
                font-size: 24rpx;
                line-height: 28.48rpx;
                width: max-content;
              }
            }
          }
        }

        .font_2 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 21.88rpx;
          color: #999999;
        }

        .text_3 {
          margin-left: 40rpx;
          margin-top: 28rpx;
          line-height: 22.3rpx;
        }

        .font_3 {
          font-size: 32rpx;
          font-family: PingFang SC;
          line-height: 25.7rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_4 {
          margin-top: 16rpx;
          line-height: 34rpx;
          width: 586rpx;
        }
      }

      .group_6 {
        margin-top: 36rpx;
        padding: 8rpx 32rpx 40rpx;
        border-top: solid 8rpx #f6f6f6;

        .group_7 {
          padding: 44rpx 0 24rpx;

          .text_5 {
            line-height: 29.72rpx;
          }
        }

        .section_3 {
          padding: 194rpx 0 102rpx;
          border-radius: 16rpx;
          background-image: url('https://ide.code.fun/api/image?token=66078e54d52b7700115185b5&name=de0b72f0fb474b1d7d55dc8a74a3e1e7.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .section_4 {
            margin-left: 292rpx;
            background-color: #fbd610;
            box-shadow: 0rpx 8rpx 8rpx #00000040;
            border-radius: 50%;
            width: 24rpx;
            height: 24rpx;
            border-left: solid 4rpx #ffffff;
            border-right: solid 4rpx #ffffff;
            border-top: solid 4rpx #ffffff;
            border-bottom: solid 4rpx #ffffff;
          }
        }
      }

      .section_2 {
        background-color: #fbd610;
        border-radius: 6rpx;
        width: 8rpx;
        height: 40rpx;
      }

      .font {
        font-size: 32rpx;
        font-family: PingFang SC;
        line-height: 29.92rpx;
        font-weight: 700;
        color: #000000;
      }
    }
  }

  .bottom-box {
    padding: 32rpx 0;
    background-color: #ffffff;

    .mt-9 {
      margin-top: 18rpx;
    }

    .ml-23 {
      margin-left: 46rpx;
    }

    .group_5 {
      padding: 0 32rpx;

      .font_2 {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 21.88rpx;
        color: #999999;
      }

      .text_6 {
        color: #000000;
        line-height: 22.34rpx;
      }

      .group_8 {
        line-height: 28.48rpx;

        .text_8 {
          color: #ff7676;
          font-size: 24rpx;
          font-family: D-DIN;
          line-height: 17.72rpx;
        }

        .text_7 {
          color: #ff7676;
          font-size: 40rpx;
          font-family: D-DIN;
          line-height: 28.48rpx;
        }
      }

      .button {
        flex: 1 1 0;

        .font {
          font-size: 32rpx;
          font-family: PingFang SC;
          line-height: 29.92rpx;
          font-weight: 700;
          color: #000000;
        }
      }

      .text-wrapper {
        padding: 28rpx 0;
        background-color: #fbd610;
        border-radius: 68rpx;
        overflow: hidden;
        height: 88rpx;
      }
    }
  }
}
</style>